<template>
  <div class="carrier-box">
    <div class="map-box">
      <div class="chart" ref="chartMap"></div>
    </div>
    <div class="list_search ">
      <div class="option">
        <div>
          <em>园区级别：</em>
          <el-select
            v-model="level"
            clearable
            placeholder="请选择"
            @change="search"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-name">
          <em>关键词搜索：</em>
          <el-input
            v-model="keyword"
            placeholder="请输入关键词"
            type="text"
            clearable
            @keydown.enter.native="search"
          />
          <span @click="search">搜索</span>
        </div>
      </div>
      <div class="select">
        <div
          :class="[clasify == '行政区' ? 'active' : '']"
          @click="changeClassify('行政区')"
        >
          行政区：{{ df.count_x }}个
        </div>
        <div
          :class="[clasify == '产业园区' ? 'active' : '']"
          @click="changeClassify('产业园区')"
        >
          产业园区：{{ df.count_y }}个
        </div>
      </div>
      <div class="list" v-if="total != 0">
        <div class="list_item" v-for="item of list" :key="item.id">
          <p class="item_title">{{ item.name }}</p>
          <p class="division"></p>
          <p class="flex_p">
            <span v-if="clasify == '产业园区'">
              园区级别：<span>{{ item.level }}</span>
            </span>
            <span>
              载体类型：<span>{{ item.cate }}</span>
            </span>
            <span>
              面积：<span>{{ item.area }}</span>
            </span>
          </p>
          <p class="flex_p">
            <el-tooltip
              class="item"
              effect="light"
              :content="item.address"
              placement="top-start"
            >
              <p class="flex_p">
                <span>
                  地址：<span>{{ item.address }}</span>
                </span>
              </p>
            </el-tooltip>
          </p>
          <p class="flex_p">
            <el-tooltip
              class="item"
              effect="light"
              :content="item.cluster"
              placement="top"
            >
              <p class="flex_p">
                <span>
                  产业集群：<span>{{ item.cluster }}</span>
                </span>
              </p>
            </el-tooltip>
          </p>

          <strong @click="goPark(item.id)">
            详情
          </strong>
        </div>
      </div>
      <el-pagination
        v-if="total != 0"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="per_page"
        layout=" prev, pager, next"
        :total="total"
      >
      </el-pagination>
      <div class="empty" v-if="total == 0">
        <img src="~@img/public/img-empty.png" alt="" />
        <p>未查找到匹配的载体~</p>
      </div>
    </div>
  </div>
</template>
<script>
import { gardens, sdMap } from "@api/atlas";
import ty from "@map/ty.json";
export default {
  data() {
    return {
      chartMap: null,
      value: "",
      clasify: "行政区",
      options: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "省级",
          value: "省级",
        },
        {
          label: "市级",
          value: "市级",
        },
        {
          label: "区县级",
          value: "区县级",
        },
        {
          label: "企业自建",
          value: "企业自建",
        },
      ],
      list: [
        {
          id: 1,
          name: "万柏林区",
          aa: "国家级",
          bb: "产业园区",
          cc: "0.077333平方公里",
          dd: "晋中市榆次区迎宾西路128号",
          ee:
            "现代物流信息、高端智能制造、新能源汽车/新能源、新材料、医药健康、文化数字...",
        },
        {
          id: 2,
          name: "万柏林区",
          aa: "国家级",
          bb: "产业园区",
          cc: "0.077333平方公里",
          dd: "晋中市榆次区迎宾西路128号",
          ee:
            "现代物流信息、高端智能制造、新能源汽车/新能源、新材料、医药健康、文化数字...",
        },
        {
          id: 3,
          name: "万柏林区",
          aa: "国家级",
          bb: "产业园区",
          cc: "0.077333平方公里",
          dd: "晋中市榆次区迎宾西路128号",
          ee:
            "现代物流信息、高端智能制造、新能源汽车/新能源、新材料、医药健康、文化数字...",
        },
      ],
      df: { count_x: 0, count_y: 0 },
      level: "",
      keyword: "",
      page: 1,
      per_page: 3,
      total: 20,
      // 选中的地图index
      activeArr: [],
    };
  },
  // "once",
  props: ["industry_id", "industry_cate"],
  watch: {
    // once(nv, ov) {
    //   if (nv == true) {
    //     this.$nextTick(() => {
    //       this.initChartMap();
    //       this.getSdMap();
    //     });
    //   }
    // },
    industry_id(nv, ov) {
      // console.log(nv);
      if (nv != ov) {
        if (this.chartMap) {
          this.chartMap.dispatchAction({
            type: "downplay",
            seriesName: "行政区",
          });
          this.chartMap.dispatchAction({
            type: "unselect",
            seriesName: "行政区",
          });
          this.chartMap.dispatchAction({
            type: "downplay",
            seriesName: "开发区",
          });
          this.chartMap.dispatchAction({
            type: "unselect",
            seriesName: "开发区",
          });
          this.chartMap.setOption({
            series: [
              {},
              {
                data: [],
              },
            ],
          });
        }
        this.keyword = "";
        this.level = "";
        this.clasify = "行政区";
        this.page = 1;
        this.getGardens();
        this.getSdMap();
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChartMap();
      this.getSdMap();
      this.getGardens();
    });
  },
  methods: {
    async getSdMap() {
      const res = await sdMap({
        inid: this.industry_id || 4,
        cate: this.industry_cate || "1",
        keyword: this.keyword,
        level: this.level,
        clasify: this.clasify,
        page: this.page,
        perpage: this.per_page,
      });
      let data = [];
      if (res.code && res.code != 0) {
      } else {
        if (this.clasify == "产业园区") {
          res.map((item) => {
            data.push({
              id: item.id,
              name: item.name,
              value: [item.jwd.lng, item.jwd.lat, 200],
            });
          });
          this.upChartMap(data);
          if (this.chartMap) {
            this.chartMap.dispatchAction({
              type: "downplay",
              seriesName: "行政区",
            });
            this.chartMap.dispatchAction({
              type: "unselect",
              seriesName: "行政区",
            });
            this.chartMap.dispatchAction({
              type: "downplay",
              seriesName: "开发区",
            });
            this.chartMap.dispatchAction({
              type: "unselect",
              seriesName: "开发区",
            });
          }
        } else if (this.clasify == "行政区") {
          let arr = [
            { index: 0, name: "小店区" },
            { index: 1, name: "迎泽区" },
            { index: 2, name: "杏花岭区" },
            { index: 3, name: "万柏林区" },
            { index: 4, name: "尖草坪区" },
            { index: 5, name: "晋源区" },
            { index: 6, name: "古交市" },
            { index: 7, name: "清徐县" },
            { index: 8, name: "阳曲县" },
            { index: 9, name: "娄烦县" },
          ];
          res.forEach((item) => {
            arr.filter((i) => {
              if (item.name == i.name) {
                data.push(i.index);
                return;
              }
            });
          });
          this.activeArr = data;
          if (this.chartMap) {
            this.chartMap.dispatchAction({
              type: "highlight",
              seriesName: "行政区",
              dataIndex: data,
            });
          }
        }
      }
    },
    async getGardens() {
      const res = await gardens({
        inid: this.industry_id || 4,
        cate: this.industry_cate || "1",
        keyword: this.keyword,
        level: this.level,
        clasify: this.clasify,
        page: this.page,
        perpage: this.per_page,
      });

      // console.log(res);
      if (res.code && res.code != 0) {
        this.df = { count_x: 0, count_y: 0 };
        this.list = [];
        this.total = 0;
      } else {
        this.df = res.df;
        this.list = res.garden;
        this.total = res.size;
      }
    },
    changeClassify(value) {
      this.chartMap.setOption({
        series: [
          {},
          {
            data: [],
          },
        ],
      });
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "行政区",
      });
      this.chartMap.dispatchAction({
        type: "unselect",
        seriesName: "行政区",
      });
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "开发区",
      });
      this.chartMap.dispatchAction({
        type: "unselect",
        seriesName: "开发区",
      });
      this.clasify = value;
      this.page = 1;
      this.getGardens();
      this.getSdMap();
    },
    search() {
      this.page = 1;
      this.getGardens();
      this.getSdMap();
    },
    goPark(id) {
      this.$router.push({
        name: "park",
        params: {
          id,
          activeMenu: "atlas",
        },
      });
    },
    initChartMap() {
      this.chartMap = this.$echarts.init(this.$refs.chartMap);
      this.$echarts.registerMap("ty", ty);
      const initOption = {
        geo: {
          type: "map",
          map: "ty",
          zoom: 1.2,
          geoIndex: 0,
          selectedMode: "single",
          label: {
            show: true,
            color: "#fff",
            formatter: function(params) {
              //标签内容
              return params.name;
            },
            fontSize: 12,
            position: "insideBottom",
          },
          itemStyle: {
            areaColor: "#2953a8",
            borderColor: "#2168be",
            borderWidth: 2,
          },
          select: {
            itemStyle: {
              areaColor: "#2c90e5",
              color: "#2c90e5",
            },
            label: {
              show: true,
              color: "#fff",
            },
          },
          emphasis: {
            label: {
              show: true,
              color: "#fff",
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            itemStyle: {
              areaColor: "#2c90e5",
              label: {
                show: true,
                color: "#fff",
              },
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "行政区",
            type: "map",
            map: "ty",
            geoIndex: 0,
            animation: false,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            data: [
              { name: "小店区" },
              { name: "迎泽区" },
              { name: "杏花岭区" },
              { name: "万柏林区" },
              { name: "尖草坪区" },
              { name: "晋源区" },
              { name: "古交市" },
              { name: "清徐县" },
              { name: "阳曲县" },
              { name: "娄烦县" },
            ],
            select: {
              itemStyle: {
                areaColor: "#fff",
                color: "#fff",
                label: {
                  show: true,
                  color: "#fff",
                },
                borderWidth: 0,
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
          },
          {
            name: "开发区",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: [
              // {
              //   name: "晋城经济技术开发区",
              //   value: [112.555016, 37.602938, 200],
              // },
            ],
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            // hoverAnimation: true,
            label: {
              show: false,
              // formatter: "  {b}",
              position: "right",
              color: "#333",
              fontSize: 14,
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            select: {
              itemStyle: {
                color: "#ffff00",
              },
              label: {
                show: true,
                padding: [4, 10],
                color: "#4077c8",
                borderRadius: [6],
                backgroundColor: "#e7f4ff",
                position: "top",

                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
            },
            itemStyle: {
              color: "#ffff00",
              shadowBlur: 10,
              shadowColor: "#ffff00",
            },
            emphasis: {
              label: {
                show: true,
                position: "top",

                padding: [4, 10],
                color: "#4077c8",
                borderRadius: [6],
                backgroundColor: "#e7f4ff",
                fontSize: 14,
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
              itemStyle: {
                color: "#ffff00",
                shadowBlur: 10,
                shadowColor: "#ffff00",
              },
            },
            selectedMode: "single",
            zlevel: 1,
          },
        ],
      };
      this.chartMap.setOption(initOption);
      // 地图点击事件
      this.chartMap.on("click", (item) => {
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "开发区",
        });
        if (
          item.componentSubType == "effectScatter" &&
          this.clasify == "产业园区"
        ) {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map" && this.clasify == "行政区") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: this.activeArr,
          });
        }
        // this.$message({
        //   message: "成功切换至" + item.name,
        //   type: "success",
        // });
      });
      this.chartMap.on("dblclick", (item) => {
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "开发区",
        });
        if (
          item.componentSubType == "effectScatter" &&
          this.clasify == "产业园区"
        ) {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map" && this.clasify == "行政区") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: this.activeArr,
          });
        }
      });
      // this.chartSelect(this.chartMap);
    },
    upChartMap(data) {
      let options = {
        series: [
          {},
          {
            data: data,
          },
        ],
      };
      this.chartMap.setOption(options);
    },
    handleCurrentChange(val) {
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "行政区",
      });
      this.chartMap.dispatchAction({
        type: "unselect",
        seriesName: "行政区",
      });
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "开发区",
      });
      this.chartMap.dispatchAction({
        type: "unselect",
        seriesName: "开发区",
      });
      this.page = val;
      this.getGardens();
      this.getSdMap();
    },
  },
};
</script>
<style lang="less" scoped>
.carrier-box {
  display: flex;
  justify-content: flex-start;
  height: 100%;
  .map-box {
    flex: 0 0 820px;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 10px;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
  .list_search {
    position: relative;
    margin-left: 20px;
    height: 100%;
    flex: 1;
    .el-pagination {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
.option {
  display: flex;
  justify-content: flex-start;
  em {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333 !important;
  }
  /deep/ .el-select .el-input__inner {
    width: 138px;
    height: 32px;
  }
  /deep/ .el-input__icon {
    line-height: 32px;
  }
}
.search-name {
  flex: 0 0 400px;
  margin-left: 20px;
  position: relative;
  /deep/ .el-input {
    width: 300px;
    height: 32px;
    line-height: 32px;
    background: #ffffff;
    border-radius: 5px;
    .el-input__inner {
      padding-right: 100px;
      width: 300px;
      height: 32px;
      line-height: 32px;
      background: #ffffff;
      border-radius: 5px;
    }
    .el-input__suffix {
      position: absolute;
      right: 70px;
      line-height: 32px;
      top: 0;
    }
  }
  span {
    position: absolute;
    margin-left: -70px;
    margin-top: 0px;
    display: inline-block;
    width: 70px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #5889dc;
    border-radius: 0px 5px 5px 0px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
.select {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 38px;
  div {
    position: relative;
    flex: 1;
    height: 74px;
    line-height: 74px;
    text-align: center;
    background: #eff1f5;
    color: #666666;
    border-radius: 10px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    cursor: default;
    &:first-of-type {
      margin-right: 10px;
    }
    &.active {
      background: #446db3;
      color: #ffffff;
      &::after {
        content: "";
        position: absolute;
        bottom: -14px;
        left: 50%;
        margin-left: -14px;
        width: 28px;
        height: 28px;
        background: #446db3;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
      }
    }
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list_item {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 0 14px 0 46px;
  width: 100%;
  height: 150px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(86, 86, 86, 0.2);
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  .item_title {
    height: 46px;
    line-height: 46px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    text-align: left;
  }

  .division {
    width: 98%;
    height: 2px;
    border-radius: 2px;
    background: #eeeeee;
  }
  .flex_p {
    width: 98%;
    display: flex;
    justify-content: space-between;
    span {
      margin: 6px 0;
      flex: 1;
      width: 0;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      line-height: 18px;
      overflow: hidden; //溢出隐藏
      text-overflow: ellipsis; //超出部分裁剪
      white-space: nowrap; //不换行
      span {
        color: #333;
      }
    }
  }
  strong {
    position: absolute;
    right: 20px;
    top: 12px;
    width: 60px;
    height: 24px;
    background: #5889dc;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    border-radius: 4px;
    text-align: center;
  }
  // &:hover {
  //   .item_title {
  //     font-size: 22px;
  //     font-weight: bold;
  //     color: #446db3;
  //   }

  //   &::after {
  //     position: absolute;
  //     top: 0;
  //     left: -1px;
  //     display: inline-block;
  //     content: "";
  //     width: 7px;
  //     height: 100%;
  //     background: #446db3;
  //     border-radius: 6px 0px 0px 6px;
  //   }
  //   strong {
  //     color: #446db3;
  //     &::after {
  //       background: url("~@img/public/icon-information-hover.png") no-repeat
  //         center;
  //     }
  //   }
  // }
}
/deep/ .el-pagination {
  margin-top: 10px !important;
}
.empty {
  text-align: center;
  img {
    margin-top: 50px;
    width: 302px;
    height: 216px;
  }
  p {
    margin-top: 20px;
    color: #446db3;
  }
}

/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .carrier-box .map-box {
    flex: 0 0 540px;
  }
  .list_item {
    height: 140px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .carrier-box .map-box {
    flex: 0 0 440px;
  }
  .list_item {
    height: 140px;
  }
  .search-name {
    flex: 0 0 300px;
  }
  /deep/ .search-name .el-input {
    width: 200px;
  }
  /deep/ .search-name .el-input .el-input__inner {
    padding-right: 100px;
    width: 200px;
    height: 32px;
  }
  .carrier-box .list_search .el-pagination {
    width: 568px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
  }

  .select div.active::after {
    bottom: -10px;
    margin-left: -10px;
    width: 20px;
    height: 20px;
  }
  .select div {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .list_item .item_title {
    height: 40px;
    line-height: 40px;
  }
  .list_item {
    height: 134px;
  }
  .list_item strong {
    top: 8px;
  }
  .list_item {
    height: 120px;
  }
  .list_item .flex_p span {
    margin: 2px 0;
    font-size: 12px;
  }
  .select {
    margin: 14px 0 30px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .carrier-box .map-box {
    flex: 0 0 440px;
  }
  .list_item {
    height: 140px;
  }
  .search-name {
    flex: 0 0 300px;
  }
  /deep/ .search-name .el-input {
    width: 200px;
  }
  /deep/ .search-name .el-input .el-input__inner {
    padding-right: 100px;
    width: 200px;
    height: 32px;
  }
  .carrier-box .list_search .el-pagination {
    width: 568px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .carrier-box .map-box {
    flex: 0 0 300px;
  }
  .list_item .flex_p span {
    margin: 2px 0;
  }
  .list_item {
    height: 116px;
  }
  /deep/ .option .el-select .el-input__inner {
    width: 90px;
  }
  .carrier-box .list_search .el-pagination {
    width: 520px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .carrier-box {
    flex-direction: column;
    overflow-y: auto;
  }
  .carrier-box .list_search {
    margin-top: 20px;
  }
  .carrier-box .list_search .el-pagination {
    position: relative;
  }
}
</style>
